import QtQuick 2.7
import QtQuick.Controls 2.3
import QtQuick.Controls 1.4 as Ctrl1
import QtQuick.Layouts 1.3
import QtQuick.Controls.Styles 1.4
import QtQml.Models 2.2
import ClockController 1.0
import '../../widget'
import '../../labels'

StackPage {
    id:window
    tabIndex: 1

    function buildDayInfo(date){
        return buildDate(date)+' 星期'+calendarLoader.weekLabel[date.getDay()===0?6:date.getDay()-1]
    }

    function buildDate(date){
        var day = date.getDate()
        if(day<10){
            day = '0'+day
        }
        var month = date.getMonth()+1
        if(month<10){
            month = '0'+month
        }
        return date.getFullYear() + '-' + month + '-' + day
    }

    Connections{
        target:clockController
        onSig_req_finished:{
            calendarLoader.sourceComponent = calendarComponent
        }
    }



    Component.onCompleted: {
        var user_id = settings.value("user/pid","0")
        clockController.slot_statcalendar_req(user_id)
    }

    ClockController{
        id:clockController
    }
    ColumnLayout{
        anchors.fill: parent
        spacing:0
        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: 40
            ReturnImg{
                onClicked: {
                    window.pop();
                }
            }
            TitleLabel {
                text: qsTr("考勤月历")
                anchors.fill: parent
            }
        }
        Rectangle{
            Layout.fillWidth: true
            Layout.preferredHeight: 40
            ContentLabel{
                text:settings.value("user/department","")+" "+settings.value("user/name","")
                anchors{
                    verticalCenter: parent.verticalCenter
                    left:parent.left
                    leftMargin: 15
                }
            }
            TitleLabel{
                id:dayInfo
                text:buildDayInfo(new Date())
                anchors{
                    verticalCenter: parent.verticalCenter
                    right:parent.right
                    rightMargin: 15
                }
            }
        }

        Loader{

            id:calendarLoader
            property var weekLabel:["一","二","三","四","五","六","日"]
            Layout.fillWidth: true

            Component{
                id:calendarComponent
                Ctrl1.Calendar {
                    onClicked: {
                        dayInfo.text = buildDayInfo(date);
                    }
                    Layout.fillWidth: true
                    navigationBarVisible:false
                    frameVisible:false
                    style: CalendarStyle{
                        gridVisible:false
                        background: Rectangle{
                            implicitHeight: 250
                            implicitWidth: 250
                        }
                        dayOfWeekDelegate: Item{
                            height:55
                            Rectangle{
                                border.color:"#FFFFFF"
                                color:"#fcfcfc"
                                anchors.fill:parent
                                Label{
                                    anchors.centerIn: parent
                                    text:calendarLoader.weekLabel[styleData.index]
                                }
                            }
                        }
                        dayDelegate:Rectangle{
                            width:45
                            height:45
                            color:"#fcfcfc"
                            Rectangle{
                                color:styleData.selected?"#2a9cff":"white"
                                readonly property int radiusWidth:parent.width>parent.height?parent.height:parent.width
                                width:radiusWidth
                                height:radiusWidth

                                Ctrl1.Label{
                                    visible:styleData.visibleMonth && styleData.valid
                                    anchors.centerIn: parent
                                    text:styleData.date.getDate()
                                    color: styleData.selected ? "#AFD7FE" : "#858b93"

                                }
                                radius:styleData.selected?this.radiusWidth/2:0
                                Rectangle{
                                    color:"#2a9cff"
                                    width:2
                                    height: 2
                                    radius:1
                                    visible: false
                                    anchors{
                                        horizontalCenter: parent.horizontalCenter
                                        bottom: parent.bottom
                                        bottomMargin: 5
                                    }
                                    Component.onCompleted: {
                                        var model = clockController.clockStatCalendarModel
                                        var thisdate = buildDate(styleData.date)
                                        var hasByDate = model.hasByDate(thisdate)
                                        if(hasByDate){
                                            visible = true
                                            color = model.getByDate(thisdate)===2?"#2a9cff":"#fe5854"
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }


        ContentLabel{
            horizontalAlignment: Text.AlignLeft
            leftPadding: 15
            text:"今日签到"+listView.count+"次"
            Layout.fillWidth: true
            Layout.preferredHeight: 50
        }
        ScrollView{
            id:scrollView
            Layout.fillWidth:true
            Layout.fillHeight: true
            ScrollBar.vertical: ScrollBar {
                parent: scrollView
                x: scrollView.mirrored ? 0 : scrollView.width - width
                y: scrollView.topPadding
                height: scrollView.availableHeight
                active: scrollView.ScrollBar.horizontal.active
            }

            ScrollBar.horizontal: ScrollBar {
                parent: scrollView
                x: scrollView.leftPadding
                y: scrollView.height - height
                width: scrollView.availableWidth
                active: scrollView.ScrollBar.vertical.active
            }
            background: Rectangle {
                border.color: "#FFFFFF"
                color:"#F8F8F8"
            }
            ListView{
                id:listView
                model:clockController.clockStatSlotModel

                delegate: Rectangle {
                    width:scrollView.width
                    height:100
                    ColumnLayout{
                        Rectangle{
                            Layout.fillWidth: true
                            Layout.preferredHeight: 15
                            ContentLabel{
                                id:clockTimeLabel
                                text:'签到时间'+time
                                color:"#5d6670"
                                anchors{
                                    left:parent.left
                                    leftMargin:15
                                    verticalCenter: parent.verticalCenter
                                }
                            }
                            ContentLabel{
                                text:isClockOn?"(上班)":"(下班)"
                                color:"#A1A1A1"
                                anchors{
                                    left:clockTimeLabel.right
                                    leftMargin:15
                                    verticalCenter: parent.verticalCenter
                                }
                            }
                        }
                        Rectangle{
                            Layout.fillWidth: true
                            Layout.preferredHeight: 15
                            ContentLabel{
                                text:place
                                color:"#B7B7B7"
                                anchors{
                                    left:parent.left
                                    leftMargin:15
                                    verticalCenter: parent.verticalCenter
                                }
                            }
                        }
                        Rectangle{
                            Layout.fillWidth: true
                            Layout.preferredHeight: 20
                            Rectangle{
                                width:50
                                height:25
                                radius:50/4
                                anchors{
                                    left:parent.left
                                    leftMargin:15
                                }
                                color:"#eab600"
                                ContentLabel{
                                    text:"迟到"
                                    color:"#FFFFFF"
                                    anchors.centerIn: parent
                                }
                            }
                        }

                    }
                }
            }
        }
    }



}
